<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      /* 填写样式 */
      .hide {
        display: none;
      }
    </style>
  </head>

  <body>
    <!-- 填写标签 -->
    <div id="jsCountdown">
      <span>01天</span>
      <span>02:</span>
      <span>03:</span>
      <span>04</span>
    </div>
    <script type="text/javascript">
      /**
       * 一道很常规的情景题，当然也有些需要注意的点，
       * 首先呢是second返回值的属性名名是固定的，测评有这个限制，比如分钟为min，
       * 其次呢就是天数为零的隐藏方式必须是使用hide，其他方式是无法通过测评的，
       * 我们这题的封装形式是很值得借鉴的，简洁且具有良好的扩展性
       */
      // 填写JavaScript
      function second(second) {
        let timeUnitsBySecond = {
          day: 86400,
          hour: 3600,
          minute: 60,
          second: 1,
        };

        return {
          //返回一个对象
          day: Math.floor(second / timeUnitsBySecond.day),
          hour: Math.floor(
            (second % timeUnitsBySecond.day) / timeUnitsBySecond.hour
          ),
          min: Math.floor(
            (second % timeUnitsBySecond.hour) / timeUnitsBySecond.minute
          ),
          second: Math.floor(
            (second % timeUnitsBySecond.minute) / timeUnitsBySecond.second
          ),
        };
      }

      function render(data) {
        let spanList = document.getElementsByTagName("span");

        //添加前置零，默认添加到长度为2
        const addZeroToLen = (value, len = 2) => {
          return String(value).length < len
            ? addZeroToLen(`0${value}`, len)
            : String(value);
        };

        //索引对应数据key
        const indexToDataKey = {
          0: "day",
          1: "hour",
          2: "min",
          3: "second",
        };

        //索引对应处理函数
        const sloveObj = {
          0: (dom, index, value) => {
            dom.innerHTML = addZeroToLen(value) + "天";
            if (!value) dom.classList.add("hide");
          },
          1: (dom, index, value) => {
            dom.innerHTML = addZeroToLen(value) + ":";
          },
          2: (dom, index, value) => {
            dom.innerHTML = addZeroToLen(value) + ":";
          },
          3: (dom, index, value) => {
            dom.innerHTML = addZeroToLen(value);
          },
        };

        //遍历渲染
        Array.from(spanList).forEach((item, index) => {
          sloveObj[index](item, index, data[indexToDataKey[index]]);
        });
      }

      //测试代码
      function aaa() {
        render(second(90061));
        var span = document
          .getElementById("jsCountdown")
          .getElementsByTagName("span");
        var result =
          !span[0].classList.contains("hide") &&
          span[0].innerHTML === "01天" &&
          span[1].innerHTML === "01:" &&
          span[2].innerHTML === "01:" &&
          span["3"].innerHTML === "01";
        return result;
      }
      console.log(aaa());

      /**
       * 可能有小友好奇这玩意有什么用，又不会动，我们可以用定时器模拟倒计时呀
       */
      //   let secondNum = 90051;
      //   render(second(secondNum--));
      //   setInterval(() => {
      //     render(second(secondNum--));
      //   }, 1000);
    </script>
  </body>
</html>
